const setWatermark = (str, font, textColor) => {
  const id: string = 'asdfghjklmnbvcxzqwertyui123456';

  // if (document.getElementById(id) !== null) {
  //   document.body.removeChild(document.getElementById(id))
  // }

  const can = document.createElement('canvas');
  can.width = 400;
  can.height = 300;

  const cans: any = can.getContext('2d');
  cans.rotate((-20 * Math.PI) / 180);
  cans.font = font + '  Microsoft JhengHei' || '16px Microsoft JhengHei';
  cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)';
  cans.textAlign = 'left';
  cans.textBaseline = 'Middle';
  cans.fillText(str, can.width / 3, can.height / 2);

  const div = document.createElement('div');
  div.id = id;
  div.style.pointerEvents = 'none';
  div.style.top = '70px';
  div.style.left = '0px';
  div.style.position = 'fixed';
  div.style.zIndex = '100000';
  div.style.width = document.documentElement.clientWidth - 100 + 'px';
  div.style.height = document.documentElement.clientHeight - 100 + 'px';
  div.style.background =
    'url(' + can.toDataURL('image/png') + ') left top repeat';
  document.body.appendChild(div);
  return id;
};

// 该方法只允许调用一次
function ddwatermark (str, textColor, font) {
  let id = setWatermark(str, textColor, font);
  setInterval(() => {
    if (document.getElementById(id) === null) {
      id = setWatermark(str, textColor, font);
    }
  }, 500);
  window.onresize = () => {
    setWatermark(str, textColor, font);
  };
}

export default ddwatermark
